<route>
  {
    path:'/'
  }
</route>
<template>
  <div class="bg">
    <!--     <div class="header">
      <div class="h-h flex none">
        <img src="@/assets/image/首页_02.jpg" alt="" srcset="">
        <img src="@/assets/image/首页_03.jpg" alt="" srcset="">
      </div>
    </div> -->
    <main id="content" role="main" class="main">
      <el-carousel>
        <el-carousel-item v-for="item in carousel" :key="item" @click="swiperLink(item)">
          <img :src="item.image" class="img1 carousel-img" alt="" srcset="" />
        </el-carousel-item>
      </el-carousel>
      <div class="line2">
        <div class="max-w flex">
          <img class="star" src="@/assets/image/star.png" alt="" srcset="" />
          <div class="info">
            <div class="big">{{ $t("common.introductionText") }}</div>
            <!-- <div class="small">{{store?.store_intro}}</div> -->
          </div>
        </div>
      </div>
      <div class="line3">
        <div class="max-w flex">
          <Video class="video" fit="contain" :src="videoUrl" />
        </div>
      </div>
      <div class="card1 py">
        <div class="b1">
          <div class="b1-left">
            <img class="img1" src="@/assets/image/home1.jpg" alt="" />
          </div>
          <div class="b1-right">
            <h6 class="b1-right-l1">{{ $t("common.game11") }}</h6>
            <h3 class="b1-right-l2">{{ $t("common.game12") }}</h3>
            <div class="b1-right-l3">
              {{ $t("common.game13") }}
              <br />
              <br />
              {{ $t("common.game14") }}
            </div>
            <div @click="bookNow" class="b1-right-l5 blue-btn">
              {{ $t("common.BOOKNOW") }}
            </div>
          </div>
        </div>
        <div class="b1 flex-row-reverse">
          <div class="b1-left">
            <img class="img1" src="@/assets/image/home2.jpg" alt="" />
          </div>
          <div class="b1-right">
            <h6 class="b1-right-l1">{{ $t("common.game21") }}</h6>
            <h3 class="b1-right-l2">{{ $t("common.game22") }}</h3>
            <div class="b1-right-l3">
              {{ $t("common.game23") }}
            </div>
            <div @click="bookNow" class="b1-right-l5 blue-btn">
              {{ $t("common.BOOKNOW") }}
            </div>
          </div>
        </div>
        <div class="b1">
          <div class="b1-left">
            <img class="img1" src="@/assets/image/home3.jpg" alt="" />
          </div>
          <div class="b1-right">
            <h6 class="b1-right-l1">{{ $t("common.game31") }}</h6>
            <h3 class="b1-right-l2">{{ $t("common.game32") }}</h3>
            <div class="b1-right-l3">{{ $t("common.game33") }}.</div>
            <div @click="bookNow" class="b1-right-l5 blue-btn">
              {{ $t("common.BOOKNOW") }}
            </div>
          </div>
        </div>
      </div>
      <div class="card2">
        <img src="@/assets/image/首页_16.jpg" class="img1" alt="" srcset="" />
        <marqueeCom> </marqueeCom>
        <div class="card2-l3">
          {{ $t("common.slogan1") }} {{store.store_name}}
        </div>
        <div class="card2-l4">{{ $t("common.slogan2") }}</div>
      </div>
      <!--    <div class="card3 py-40">
        <div class="b3">
          <h6 class="card3-l1">COPYWRITING</h6>
          <h3 class="card3-l2">COPYWRITING</h3>
          <div class="card3-l3">Copywriting Copywriting CopywritingCopywritingCopywriting</div>
          <div class="card3-l4">Email</div>
          <div class="card3-l5">
            <input processing="false" class="input w100" name="email" type="email" placeholder="example@gmail.com">
            <div class="btn w100">COPYWRITING</div>
          </div>
        </div>
      </div> -->
    </main>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import marqueeCom from "./widget/marquee.vue";
import Video from "@/modules/game/widget/video.vue";
import { useRouter } from "vue-router";
import { initData, gameList } from "./home.service";
const router = useRouter();
const isMobile = ref(localStorage.getItem('isMobile'))

const bookNow = () => {
  if(isMobile.value==='true'){
    if(JSON.parse(localStorage.getItem('custom')).reservation_mode === 'single_ticket'){
      router.push({ path: "/reserveMobile2" });
    }else{
      router.push({ path: "/reserveMobile" });
    }
  }else{
    if(JSON.parse(localStorage.getItem('custom')).reservation_mode === 'single_ticket'){
      router.push({ path: "/reserve2" });
    }else{
      router.push({ path: "/reserve" });
    }
  }
};

const carousel = ref([]);
const store = ref({});
const videoUrl = ref(
  "https://cdn.game.paac.com.cn/files/store/dLjxzeTzIrshntidzXJVkuyVebcbTExb.mp4"
);

const swiperLink = (item:any) => {
  if(item.link){
    window.open(item.link, "_blank");
  }
}


const getdata = () => {
  initData().then((res) => {
    if(!res.data.store.custom.reservation_mode){
      res.data.store.custom.reservation_mode = 'all_ticket'
    }
    carousel.value = res.data.carousel;
    store.value = res.data.store;
    localStorage.setItem("custom", JSON.stringify(res.data.store.custom));
    const meta1 = document.createElement("meta");
    meta1.setAttribute("name", "description");
    meta1.setAttribute("content", store.value.seo_description);
    const meta2 = document.createElement("meta");
    meta2.setAttribute("name", "keywords");
    meta2.setAttribute("content", store.value.seo_keywords);
    document.head.appendChild(meta1);
    document.head.appendChild(meta2);
  });
};
getdata();
</script>
<style lang="scss" scoped>
@media screen and (max-width: 1024px) {
  .header {
    display: none !important;
  }
  .lg80 {
    height: 80px !important;
  }
  .flex {
    display: flex !important;
  }
  .py {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
  .b1-left {
    width: 100% !important;
  }
  .w100 {
    width: 100% !important;
  }
  .b1-right {
    width: 100% !important;
    margin-top: 2.5rem !important;
  }
  .flex-row-reverse {
    flex-direction: column !important;
  }
  .b4-right {
    margin-left: 0 !important;
  }
  .b4-right-right {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    margin-top: 2rem !important;
  }
  .big-top {
    margin-top: 3rem !important;
  }
}
@media screen and (max-width: 768px) {
  .flex-wrap {
    flex-wrap: wrap !important;
  }

  .card2-l4 {
    font-size: 12pt !important;
  }

  .max-w{
    padding: 0 20px !important;
  }
  .line2 {
    width: 100%;
    background-image: url("@/assets/image/home2Bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    .star {
      width: 6rem !important;
    }
    .info {
      color: #fff;
      margin-left: 20px;
      margin-right: 20px;
      .big {
        margin-bottom: 10px;
        font-size: 12px !important;
        font-weight: 600;
      }
      .samll {
        font-size: 16pt;
      }
    }
  }
}
.max-w {
  width: 100%;
  max-width: 1440px;
  padding: 0 4rem;
}
.flex {
  display: flex;
  align-items: center;
}
.blue-btn {
  width: 130px;
  padding: 8px 0;
  background-color: var(--theme-color-home-btn);
  color: #fff;
  font-size: 12pt;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-content: center;
  cursor: pointer;
}
.line2 {
  width: 100%;
  background-image: url("@/assets/image/home2Bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .star {
    width: 10rem;
  }
  .info {
    color: #fff;
    margin-left: 20px;
    margin-right: 20px;
    .big {
      margin-bottom: 10px;
      font-size: 20pt;
      font-weight: 600;
    }
    .samll {
      font-size: 16pt;
    }
  }
}
.line3 {
  width: 100%;
  background-image: url("@/assets/image/homeVBg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 7rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .video {
    width: 100%;
    border-radius: 30px;
  }
}
.main {
  display: flex;
  flex-direction: column;
}
.bg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    transition-duration: 0.7s;
    position: relative;
    height: 80px;
    .h-h {
      width: 100%;
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
      padding-left: 3rem;
      padding-right: 3rem;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      position: fixed;
      background-image: url(@/assets/image/首页_01.jpg);
      background-size: 100% 100%;
    }
  }

  .main {
    .py {
      padding-top: 8rem;
      padding-bottom: 8rem;
    }
    .carousel-img {
      height: 30.95vw;
    }
    .img1 {
      width: 100%;

      /*    object-fit: cover;
      min-height: 400px;
      height: auto; */
    }
    .card1 {
      background-color: rgb(226 232 253);
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 5rem;
      .b1 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-left: auto;
        margin-right: auto;
        max-width: 80rem;
        .b1-left {
          width: 50%;
          padding-right: 1.25rem;
        }
        .b1-right {
          width: 50%;
          padding: 0 1.25rem;
          margin-top: 0;

          .b1-right-l1 {
            color: rgb(0 0 20);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-size: 12pt;
            margin-bottom: 0.25rem;
          }
          .b1-right-l2 {
            color: rgb(0 0 20);
            line-height: 1;
            font-weight: 700;
            text-transform: capitalize;
            font-size: 24pt;
            margin-bottom: 2rem;
          }
          .b1-right-l3 {
            color: rgb(0 0 20);
            font-size: 14pt;
            margin-bottom: 1rem;
          }
          .b1-right-l4 {
            color: rgb(0 0 20);
            font-weight: 700;
            font-size: 14pt;
            margin-bottom: 1rem;
          }
        }
      }
    }
    .card2 {
      background-color: #000;
      .card2-l3 {
        color: rgb(226 232 253);
        font-size: 12pt;
        letter-spacing: 0.05em;
        margin-bottom: 0.5rem;
        margin-top: 3rem;
        text-align: center;
      }
      .card2-l4 {
        color: rgb(226 232 253);
        font-size: 14pt;
        letter-spacing: 0.05em;
        padding-bottom: 4rem;
        font-weight: 600;
        text-align: center;
      }
    }
    .card3 {
      padding: 6rem 0;
      background-color: rgb(226 232 253);
      width: 100%;
      .b3 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        max-width: 64rem;
        margin-left: auto;
        margin-right: auto;
      }
      .card3-l1 {
        color: rgb(0, 0, 20);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-size: 12pt;
        margin-bottom: 0.25rem;
      }
      .card3-l2 {
        color: rgb(0, 0, 20);
        line-height: 1;
        font-weight: 700;
        text-transform: capitalize;
        font-size: 24pt;
        margin-bottom: 2rem;
      }
      .card3-l3 {
        color: rgb(0, 0, 20);
        font-size: 14pt;
        margin-bottom: 1rem;
      }
      .card3-l4 {
        font-size: 12pt;
        margin-bottom: 0.5rem;
        color: #000;
      }
      .card3-l5 {
        margin-top: 2rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        .input {
          width: calc(50% - 0.5rem);
          font-size: 14pt;
          padding: 0.75rem;
          background-color: transparent;
          border: 1px solid rgb(0, 0, 20);
        }
        .btn {
          width: calc(50% - 0.5rem);
          color: #fff;
          font-weight: 600;
          font-size: 12pt;
          text-align: center;
          height: 50px;
          line-height: 50px;
          padding: 0;
          background: #fd1e4c;
          transition: all 0.3s ease-in-out;
        }
      }
    }
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
}
</style>
<style>
.el-carousel__container {
  height: 30.95vw;
}
</style>